<template>
  <el-slider
    v-model="value"
    size="mini"
    :min="min"
    :max="max"
    :step="step"
    :format-tooltip="formatTooltip"
    @change="(value) => $emit('change', value)"
    />
</template>

<script>
export default {
    props: ['defaultValue', 'min', 'max', 'step', 'formatTooltip'],
    data() {
        return {
            value: 0,
        };
    },
    watch: {
        defaultValue(val) {
            this.value = val;
        },
    },
    mounted() {
        this.value = this.defaultValue;
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-slider__button {
    width: 10px;
    height: 10px;
}
</style>

</style>